<template>
	<div id="Start">
		<el-row :gutter="20">
			<el-col :span="8" v-for="(arr,arrIndex) in dataList" :key="arrIndex">
				<el-card class="box-card" v-for="(item,index) in arr" :key="index">
					<el-collapse v-model="activeNames">
						<el-collapse-item :title="item.Name" :name="item.No">
							<el-row
								type="flex"
								justify="space-between"
								class="rowMargin"
								v-for="(items,indexs) in item.child"
								:key="indexs"
							>
								<el-col :span="20">
									<el-link :underline="false" @click="sikpMyflow(items)">{{items.Name}}</el-link>
								</el-col>
								<el-col :span="4">
									<el-popover placement="bottom" width="100" trigger="click">
										<el-menu class="menuBox" @open="handleOpen" @close="handleClose">
											<el-menu-item index="1" @click="menuClick(1)">
												<span slot="title">列表发起</span>
											</el-menu-item>
											<el-menu-item index="2" @click="menuClick(2)">
												<span slot="title">我发起的流程</span>
											</el-menu-item>
											<el-menu-item index="3" @click="menuClick(3)">
												<span slot="title">我审批的流程</span>
											</el-menu-item>
											<el-menu-item index="4" @click="menuClick(4)">
												<span slot="title">我的流程</span>
											</el-menu-item>
											<el-menu-item index="5" @click="menuClick(5)">
												<span slot="title">查询主页</span>
											</el-menu-item>
											<el-menu-item index="6" @click="menuClick(6)">
												<span slot="title">我发起的流程</span>
											</el-menu-item>
										</el-menu>
										<i class="el-icon-view el-icon--right" slot="reference"></i>
									</el-popover>
								</el-col>
							</el-row>
						</el-collapse-item>
					</el-collapse>
				</el-card>
			</el-col>
		</el-row>
		<el-dialog title="公共弹窗" :visible.sync="showStartOperation">
			<listInitiate v-if="judgeOperation == 1"></listInitiate>
			<selectiveRecipient v-if="judgeOperation == 2"></selectiveRecipient>
			<div v-if="judgeOperation == 3">我审批的流程</div>
			<div v-if="judgeOperation == 4">我的流程</div>
			<div v-if="judgeOperation == 5">查询主页</div>
			<div v-if="judgeOperation == 6">我发起的流程</div>
		</el-dialog>
	</div>
</template>

<script>
import listInitiate from './components/listInitiate.vue'
import selectiveRecipient from './components/selectiveRecipient.vue'
export default {
	name: "Start",
	components: {
		listInitiate,
		selectiveRecipient
	},

	data() {
		return {
			title: "流程发起",
			activeNames: "",
			dataList: [],
			showStartOperation: false,
			judgeOperation:0
		};
	},

	beforeCreate() {},

	created() {
		// this.$store.commit('setData', "阜新")
		// console.log("vuex",this.$store.getters);
		this.loadData();
		
	},

	methods: {
		// 获取数据
		loadData() {
			let handler = new this.HttpHandler("BP.WF.HttpHandler.WF");
			handler.AddUrlData();
			let data = handler.DoMethodReturnString("Start_Init");
			console.log(data);
			this.filterData(JSON.parse(data));
		},

		// 过滤数据
		filterData(data) {
			data.Sort.forEach(item => {
				item.child = [];
				data.Start.forEach(items => {
					if (item.No == items.FK_FlowSort) {
						item.child.push(items);
					}
				});
			});
			let data1 = data.Sort;
			console.log(data1);
			let brr1 = [];
			let brr2 = [];
			let brr3 = [];
			for (let i = 0; i < data1.length / 3; i++) {
				if (data1[i * 3]) {
					brr1[i] = data1[i * 3];
				}
				if (data1[i * 3 + 1]) {
					brr2[i] = data1[i * 3 + 1];
				}
				if (data1[i * 3 + 2]) {
					brr3[i] = data1[i * 3 + 2];
				}
			}
			this.dataList = [brr1, brr2, brr3];
		},


		handleOpen(key, keyPath) {
			console.log(key, keyPath);
		},
		handleClose(key, keyPath) {
			console.log(key, keyPath);
		},

		//跳转myflow
		sikpMyflow(item){
			console.log(item);
			// this.$router.push("myFlow?FK_Flow=350");
			this.$router.push({name:"myflow",params:{FK_Flow:item.No,FromPage:"Start"}});
		},

		// 菜单单击
		menuClick(val) {
			console.log(val)
			this.showStartOperation = true;
			this.judgeOperation = val;
		}
	},

	//监听
	computed: {},

	//监听后执行动作
	watch: {}
};
</script>

<style lang="less" scoped>
.el-row {
	margin-bottom: 20px;
	&:last-child {
		margin-bottom: 0;
	}
}
.el-col {
	border-radius: 4px;
}
/deep/ .el-card {
	margin-bottom: 20px;
}
/deep/ .el-card__body {
	padding: 10px;
}
/deep/ .el-collapse-item__header {
	height: auto;
	line-height: 1;
	border: none;
}
/deep/ .el-collapse {
	border: none;
}
/deep/ .el-collapse-item__wrap {
	border: none;
}
.menuBox {
	border: none !important;
}
/deep/ .el-menu-item {
	height: 40px;
	line-height: 40px;
}
/deep/ .el-icon-view {
	cursor: pointer;
}
/deep/ .el-dialog {
	min-width: 80%;
	min-height: 80%;
}
.rowMargin {
	margin: 15px 0;
}
</style>